<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <!-- 数据概览卡片 -->
      <el-col :span="6" v-for="item in statisticsData" :key="item.title">
        <el-card class="statistics-card">
          <div class="card-header">
            <i :class="item.icon"></i>
            <span>{{ item.title }}</span>
          </div>
          <div class="card-content">
            <div class="number">{{ item.value }}</div>
            <div class="desc">{{ item.desc }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <!-- 销售趋势图 -->
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>销售趋势</span>
          </div>
          <div class="chart" ref="salesChart"></div>
        </el-card>
      </el-col>
      <!-- 订单统计 -->
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>订单统计</span>
          </div>
          <div class="chart" ref="orderChart"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近活动 -->
    <el-row class="activity-row">
      <el-col :span="24">
        <el-card>
          <div slot="header">
            <span>最近活动</span>
          </div>
          <el-table :data="activities" style="width: 100%">
            <el-table-column prop="time" label="时间" width="180"></el-table-column>
            <el-table-column prop="user" label="用户" width="180"></el-table-column>
            <el-table-column prop="action" label="操作"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 修改 echarts 的引入方式
import * as echarts from 'echarts/core'
import { LineChart, PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

// 注册必需的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  PieChart,
  CanvasRenderer
])

export default {
  name: 'AdminDashboard',
  data() {
    return {
      statisticsData: [
        { title: '总销售额', value: '¥126,560', desc: '较昨日增长 12%', icon: 'el-icon-money' },
        { title: '订单数量', value: '856', desc: '本周订单总量', icon: 'el-icon-s-order' },
        { title: '用户数量', value: '2,345', desc: '累计注册用户', icon: 'el-icon-user' },
        { title: '商品数量', value: '1,678', desc: '在售商品总数', icon: 'el-icon-goods' }
      ],
      activities: [
        { time: '2024-01-17 15:32', user: '张三', action: '新增订单 #12345' },
        { time: '2024-01-17 14:21', user: '李四', action: '更新商品库存' },
        { time: '2024-01-17 13:15', user: '王五', action: '添加新商品' },
        { time: '2024-01-17 12:30', user: '赵六', action: '处理退款申请' }
      ]
    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      // 初始化销售趋势图
      const salesChart = echarts.init(this.$refs.salesChart)
      salesChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        }]
      })

      // 初始化订单统计图
      const orderChart = echarts.init(this.$refs.orderChart)
      orderChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [{
          type: 'pie',
          radius: '50%',
          data: [
            { value: 235, name: '待付款' },
            { value: 274, name: '待发货' },
            { value: 310, name: '已发货' },
            { value: 335, name: '已完成' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  
  .statistics-card {
    margin-bottom: 20px;
    
    .card-header {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      
      i {
        font-size: 20px;
        margin-right: 10px;
        color: #409EFF;
      }
    }
    
    .card-content {
      .number {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
      }
      
      .desc {
        margin-top: 5px;
        font-size: 14px;
        color: #909399;
      }
    }
  }

  .chart-row {
    margin: 20px 0;
    
    .chart {
      height: 300px;
    }
  }

  .activity-row {
    margin-top: 20px;
  }
}
</style>